<template>
  	<section v-loading="loading" class="coupon">
	  	<div class="searchbox">
		      <el-form inline class="demo-form-inline fl">
		        <el-form-item >
		          <el-input class="yhq_name" size="medium" v-model="search.k" placeholder="优惠券名称"></el-input>
		        </el-form-item>
                <el-form-item>
		          <el-button type="primary" size="small" icon="el-icon-search" @click="getData">搜&nbsp;&nbsp;索</el-button>
		        </el-form-item>
		      </el-form>
		      <el-button type="primary" size="small" icon="el-icon-plus" class="fr" v-on:click.stop="tianjia = !tianjia">添加优惠券</el-button>
	  	</div>

      <div @contextmenu="$parent.addMenu([{name:'刷新优惠券列表',method:'getData'}])">
      <el-table :data="coupon_list" tooltip-effect="dark" highlight-current-row style="width: 100%;text-align:center">
          <el-table-column prop="name" label="优惠券名称"></el-table-column>
        	<el-table-column prop="begin_time" label="使用开始时间"></el-table-column>
        	<el-table-column prop="end_time" label="使用结束时间"></el-table-column>
        	<el-table-column prop="lq_num" label="领取人数"></el-table-column>
        	<el-table-column prop="sy_num" label="使用人数"></el-table-column>
        	<el-table-column prop="sos" label="使用率"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
            	 <div v-if="scope.row.status == 1" style="color:#5AD3B6">上线</div>
            	 <div v-if="scope.row.status == 0" style="color:red">下线</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
          	<template slot-scope="scope">
          		<div style="color:#5AD3B6;cursor:pointer;" @click="modify(scope.row.id)">修改</div>
          	</template>
          </el-table-column>
      </el-table>
      <div class="breakpage" v-if="page.total>0">
        <el-pagination background layout="total,prev, pager, next"
            :total="parseInt(page.total)"
            :page-size="parseInt(page.pagesize)"
            :current-page="parseInt(page.curpage)"
            @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
    <!--编辑弹出框-->
        <el-dialog title="修改" :visible.sync="dialogTableVisible" width="550px">
        <el-form :model="form" :rules="rules" label-width="120px">
          <el-form-item label="优惠券名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="使用开始时间" prop="begin_time">
            	<el-date-picker type="datetime" v-model="form.begin_time"></el-date-picker>
          </el-form-item>

          <el-form-item label="使用结束时间" prop="end_date">
            	<el-date-picker type="datetime" v-model="form.end_date"></el-date-picker>
          </el-form-item>

          <el-form-item label="设置金额" prop="money">
            <el-input type="text" v-model="form.money"> </el-input>
          </el-form-item>

          <el-form-item label="状态" prop="status">
			<el-select  size="medium" v-model="form.status">
			    <el-option label="上线" value="1"></el-option>
			    <el-option label="下线" value="0"></el-option>
			</el-select>
          </el-form-item>

          <el-form-item label="活动说明" prop="beizhu">
            <el-input type="textarea" :rows="2" v-model="form.beizhu"> </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
    	<el-button type="primary" size="small" v-on:click="on_edit">保存</el-button>
        </div>
        </el-dialog>

      <!-- 添加弹出框 -->
        <el-dialog title="添加" :visible.sync="tianjia" width="550px">
        <el-form :model="add_date" :rules="rules" label-width="120px">

          <el-form-item label="优惠券名称" prop="name">
            <el-input type="text"  placeholder="请填写优惠券名称" v-model="add_date.name"></el-input>
          </el-form-item>

          <el-form-item label="活动开始时间" prop="begin_time">
              <el-date-picker type="datetime" v-model="add_date.begin_time" placeholder="选择日期时间"> </el-date-picker>
          </el-form-item> 

          <el-form-item label="使用结束时间" prop="end_date">
              <el-date-picker v-model="add_date.end_date" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>

          <el-form-item label="设置金额" prop="money">
             <el-input type="text"  placeholder="请设置金额"  v-model="add_date.money" > </el-input>
          </el-form-item>
 
           <el-form-item label="状态" prop="status">
			<el-select  size="medium" v-model="add_date.status" style="width:385px;">
			    <el-option label="上线" value="1"></el-option>
			    <el-option label="下线" value="0"></el-option>
			</el-select>
          </el-form-item>

          <el-form-item label="活动说明" prop="money">
            <el-input style="width:89%" type="textarea" :rows="2" placeholder="本券仅限一人一次使用,不得找零,不得兑换现金" v-model="add_date.beizhu"> </el-input>
          </el-form-item>
        </el-form>
		<div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" v-on:click="on_add">保存</el-button>
     	 </div>
        </el-dialog>
	</section>
</template>

<script>
//引入请求借口;
import * as api from '../api/index'
import {date} from '../lib/function'
import Vue from 'vue'
export default {
    data() {
        return {
        	page:[],            //分页
        	form:{},
        	add_date:{},
        	search:{},
        	tianjia:false,
        	coupon_list:[],
        	dialogTableVisible:false,
        	    rules: {
              name:[{required:true,message:'请输入优惠券名称',trigger:'blur'}],
              begin_time:[{required:true,message:'请输入优惠券使用开始时间',trigger:'blur'}],
              end_date:[{required:true,message:'请输入优惠券使用结束时间',trigger:'blur'}],
              money:[{required:true,message:'请输入优惠券金额',trigger:'blur'}],
              status:[{required:true,message:'请选择优惠券状态',trigger:'chnage'}],
              beizhu:[{required:true,message:'请输入优惠券活动说明',trigger:'blur'}],
            }
        }
    },
    methods:{
    	modify:function(id){
    		api.coupon.modify({id:id},res=>{
    			this.dialogTableVisible=true;
    			res.info.begin_time = date(res.info.begin_time,'Y-m-d H:i:s');
    			res.info.begin_date = date(res.info.begin_date,'Y-m-d H:i:s');
    			res.info.end_date = date(res.info.end_date,'Y-m-d H:i:s');
    			this.form = res.info;
    		})
    	},
    	on_add:function(){
    		api.coupon.add(this.add_date,res=>{	
	    		if(res.status==1){
	    			this.tianjia=false;
	    		}
    		})
    	},
    	on_edit:function(){
    		api.coupon.modify(this.form,res=>{
    			if(res.status ==1){
    				this.dialogTableVisible=false;
    				this.$notify({type: 'success',title:'修改成功'});
    			}
    		})
    	},
    	    //点击分页数:
	    pageChange(p){
	        this.page.p=p;
	        this.getData();
	    },
    	getData:function(){
    	if(this.page.p=='undefined') this.page.p=1;
    	let params={p:this.page.p,search:this.search.k};
    		api.coupon.select(params,res=>{
    			this.coupon_list = res.info;
    			this.page = res.page;
    		})
    	}
    },
    //生命周期函数;
    created(){
        this.getData();
    }
}
</script>
<style scoped>

</style>